<template>
  <ul class="tree-ul">
    <li v-for="(item,index) in tree" :key="index">
      <div class="item" @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1"  
      :draggable="item.levelType == 'camera'" @dragstart="dragstartEvent(item)" @dragend="dragendEvent(item)"
      @click="getSubTree(item,item.levelType)">
        <img src="./image/close_on.png" alt="" v-show="!item.show && item.levelType != 'camera' && hoverIndex == index">
        <img src="./image/close.png" alt="" v-show="!item.show && item.levelType != 'camera' && hoverIndex != index">
        <img src="./image/show_on.png" alt="" v-show="item.show && item.levelType != 'camera' && hoverIndex == index">
        <img src="./image/show.png" alt="" v-show="item.show && item.levelType != 'camera' && hoverIndex != index">
        <img v-show="!item.children && item.show && item.levelType == 'camera'" src="./image/video_on.png" alt="">
        <img v-show="!item.children && !item.show && item.levelType == 'camera'" src="./image/video.png" alt="">
        <img v-if="!item.children && item.status == 0" src="./image/video_error.png" alt="">
        <span>{{item.nodeName}}</span>
      </div>
      <tree v-if="item.children" :tree="item.children" v-show="item.show" />
      <!-- <tree v-if="item.level == 1 && item.typeCompany" :tree="item.typeCompany"  />
      <tree v-if="item.level == 2 && item.directCompany" :tree="item.directCompany"  />
      <tree v-if="item.level == 3 && item.projectCompany" :tree="item.projectCompany"  /> -->
    </li>
    
  </ul>
</template>

<script>
import {getVideoSubTree , getVideoRcmdTree} from '@/api/live/video'

export default {
  name:'tree',
  data() {
    return {
      dom:'',
      hoverIndex:-1,
      hoverIndex1:-1,
      show:false,
      routerName:''
    }
  },
  computed: {
    playids() {
      return this.$store.state.playids
    },
  },
  watch: {
    playids(val) {
    }
  },
  props:['tree','recommend'],
  mounted() {

  },
  methods: {
    // showEvent(item) {
    //   if(item.levelType != 'camera') {
    //     item.show = !item.show
    //   }
      
    // },
    // 查询子视频树
    getSubTree(item,type) {
      // console.log(console.log(type))
      // 不是摄像头才调用接口
      if(item.levelType != 'camera') {

        

        if(item.levelType == 'rcmd') {
          if(!item.show) {
            // 判断有误子集，没有则调接口
            if(!item.children) {
              getVideoRcmdTree({
                nodeId:item.nodeId,
                level:item.level
              }).then(res => {
                item.children = res.data.body
                item.show = true
                this.$emit('clearFatherObj', this.tree)
              })
            }else {
              item.show = !item.show
            }
            
          }else {
            item.show = false
          }
        }
        else {
          if(!item.show ) {
            if(!item.children) {
              getVideoSubTree({
                nodeId:item.nodeId,
                level:item.level
              }).then(res => {

                item.children = res.data.body
                item.show = true
                // this.tree = []
                // this.$emit('clearFatherObj', this.tree)
                // console.log(2)
              })
            }else {
              item.show = !item.show
            }
          }else {
            item.show = false
          }
        }
      }
      
      
      // if(item.levelType != 'camera') {
      //   if(item.type == 'rmd') {
      //     item.show = !item.show
      //     // console.log('1')
      //   }
      //   else {
      //     if(!item.show ) {
      //       getVideoSubTree({
      //         nodeId:item.nodeId,
      //         level:item.level
      //       }).then(res => {

      //         item.children = res.data.body
      //         item.show = true
      //         // this.tree = []
      //         this.$emit('clearFatherObj', this.tree)
      //         // console.log(2)
      //       })
      //     }else {
      //       item.show = false
      //     }
      //   }
      // }
    },
    dragstartEvent(item) {
      // item.show = false
      // console.log(item)
      this.$store.commit('setCameraId',item.nodeId)
      this.$store.commit('setItem',item)
      // this.$emit('haha', 'haha')
      // this.dom = e.currentTarget.cloneNode(true)
      // console.log(e.currentTarget)
      // console.log(item)
    },
    dragendEvent(item) {
       
      
      // console.log(item.cameraId)
      
      // console.log(e.currentTarget)
    }
  }
};
</script>

<style scoped lang="less" >
.tree-ul {
  li {
    cursor: pointer;
    padding-left:20px;
    font-size:16px;
    .item {
      min-height:32px;
      padding:5px 0;
      display:flex;
      align-items: center;
      box-sizing: border-box;
      border-radius: 4px;
      padding-left:5px;
      color:#4D4D4D;
      img {
        margin-right:10px;
      }
    }
    .item:hover {
      background:#E1E8ED;
      color:#000;
    }
  }
}
</style>
